import React, { useEffect ,useState} from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import './Rotation.css'


const Rotation = (props) => {
    console.log(props,'props');
    const {rotation}=props
    console.log(rotation,'=-');
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.swiper_container', {
                loop: true,
                // autoplay:{
                //     delay: 1000
                // },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            })
        }, 100)
    }, [])
    return (
        <div className="rotation_box">
            <div className="swiper_container">
                <div className="swiper-wrapper">
                {
                    rotation.map((item, index) => {
                        // console.log(item,index,'----');
                        return (
                           
                            <div 
                            key={index}
                            className="swiper-slide">
                                    <img className="rotationChart-img"
                                     src={item.image} alt="" />
                            </div>
                        )
                    })
                }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </div>
    )
}

export default Rotation